</br></br>
<h1>Recomendações de Produtos</h1>
</br></br>
<div id="galeria" class="gallery">
    <ul class="cf">  
        <li class='groups'> 
            <ul> 
                <li class='item'><input type='checkbox' name='item[]'  value='306' id='306'><label for='306'><img src='imagens/Produtos/306.png'><div class='hint'><h4>CELLULAR RADIANCE EMULSION SPF50</h4> <p>Preço: 844.44</p></div></label></li>
                <li class='item'><input type='checkbox' name='item[]'  value='362' id='362'><label for='362'><img src='imagens/Produtos/362.png'><div class='hint'><h4>ANTI-AGING LONGEVITY SERUM</h4> <p>Preço: 425.04</p></div></label></li>
                <li class='item'><input type='checkbox' name='item[]'  value='312' id='312'><label for='312'><img src='imagens/Produtos/312.png'><div class='hint'><h4>CELLULAR RADIANCE CONCENTRATE PURE GOLD</h4> <p>Preço: 1301.66</p></div></label></li>
            </ul>
        </li> 
        <li class='groups next'> 
            <ul> 
                <li class='item'><input type='checkbox' name='item[]'  value='313' id='313'><label for='313'><img src='imagens/Produtos/313.png'><div class='hint'><h4>CELLULAR ENERGIZING BODY SPRAY</h4> <p>Preço: 145.56</p></div></label></li><li class='item'><input type='checkbox' name='item[]'  value='314' id='314'><label for='314'><img src='imagens/Produtos/314.png'><div class='hint'><h4>CELLULAR ENERGIZING BODY LOTION</h4> <p>Preço: 131.11</p></div></label></li><li class='item'><input type='checkbox' name='item[]'  value='316' id='316'><label for='316'><img src='imagens/Produtos/316.png'><div class='hint'><h4>CELLULAR ENERGIZING BATH SHOWER GELEE</h4> <p>Preço: 122.23</p></div></label></li></ul>
        </li>
        <li class='groups next'> 
            <ul> <li class='item'><input type='checkbox' name='item[]'  value='315' id='315'><label for='315'><img src='imagens/Produtos/315.png'><div class='hint'><h4>CELLULAR POWER INFUSION</h4> <p>Preço: 977.78</p></div></label></li><li class='item'><input type='checkbox' name='item[]'  value='352' id='352'><label for='352'><img src='imagens/Produtos/352.png'><div class='hint'><h4>CELLULAR LIP LINER PLUMPER</h4> <p>Preço: 326.99</p></div></label></li><li class='item'><input type='checkbox' name='item[]'  value='353' id='353'><label for='353'><img src='imagens/Produtos/353.png'><div class='hint'><h4>CELLULAR LIP RENEWAL CONCENTRATE</h4> <p>Preço: 189.44</p></div></label></li></ul>
        </li> 
        <li class='groups next'> 
            <ul><li class='item'><input type='checkbox' name='item[]'  value='313' id='313'><label for='313'><img src='imagens/Produtos/313.png'><div class='hint'><h4>CELLULAR ENERGIZING BODY SPRAY</h4> <p>Preço: 145.56</p></div></label></li><li class='item'><input type='checkbox' name='item[]'  value='314' id='314'><label for='314'><img src='imagens/Produtos/314.png'><div class='hint'><h4>CELLULAR ENERGIZING BODY LOTION</h4> <p>Preço: 131.11</p></div></label></li><li class='item'><input type='checkbox' name='item[]'  value='316' id='316'><label for='316'><img src='imagens/Produtos/316.png'><div class='hint'><h4>CELLULAR ENERGIZING BATH SHOWER GELEE</h4> <p>Preço: 122.23</p></div></label></li></ul>
        </li> 
        <li class='groups next'> 
            <ul> 
                <li class='item'>
                    <input type='checkbox' name='item[]'  value='319' id='319'>
                    <label for='319'>
                        <img src='imagens/Produtos/319.png'>
                        <div class='hint'>
                            <h4>CELLULAR RADIANCE EMULSION SPF40</h4> 
                            <p>Preço: 861.12</p>
                        </div>
                    </label>
                </li>
                <li class='item'>
                    <input type='checkbox' name='item[]'  value='389' id='389'>
                    <label for='389'>
                        <img src='imagens/Produtos/389.png'>
                        <div class='hint'>
                            <h4>CELLULAR RADIANCE EYE CREAM</h4>
                            <p>Preço: 1261.95</p>
                        </div>
                    </label>
                </li>
            </ul>
        </li>
        <li class="groups hide">
            <ul>
                <li class='item'><img class="imagemProduto" src="imagens/Produtos/376.png"><div class='hint'><h4></h4><p>Preço:</p></div></li>
                <li class='item'><img class="imagemProduto" src="imagens/Produtos/379.png"><div class='hint'><h4></h4><p>Preço:</p></div></li>
                <li class='item'><img class="imagemProduto" src="imagens/Produtos/329.png"><div class='hint'><h4></h4><p>Preço:</p></div></li>
            </ul>
        </li>
    </ul>
    <div class="control">
        <span class="next"></span>
        <span class="back"></span>
    </div>  
</div>
<button class='btn' type="submit">Salvar Histórico de Venda</button>
</form>
<script>
    
    var active = 0;
    var gal = $(".gallery").children("ul");
    var li =  gal.children(".groups");    
    var max = li.length;
    
    $(".gallery").find(".control .next").click(function(){
        next();
    });
    $(".gallery").find(".control .back").click(function(){
        back();
    });
    function next(){
        if(active+1===max)
           return;
        active++;        
        render();
    }
    function back(){
        if(!active)
            return;
        active--;        
        render();
    }
    function render(){
        li.each(function (index, element){
            var el = $(element);
            el.removeClass("hide").removeClass("next");
            if(index === active + 1)
                el.addClass("next");                
            else if(index !== active)
                el.addClass("hide");            
    });
    }
</script>
